import React from 'react'
import { SearchOutlined } from '@ant-design/icons';
import { Space } from 'antd'
import classes from './FilterMeals.module.css'

const FilterMeals = (props) => {

    const inputChange = e => {
        console.log(e.target.value)
        const keyword = e.target.value.trim()
        props.onFilter(keyword)
    }
    return (
        <div className={classes.FilterMeals}>
            <div className={classes.InputOuter}>
                <Space>
                    <SearchOutlined className={classes.SearchIcon} />
                </Space>
                <input
                    onChange={inputChange}
                    className={classes.SearchInput}
                    type="text"
                    placeholder={'请输入关键字'}
                />
            </div>
        </div>
    )
}

export default FilterMeals